---
title: 将你的 Astro 网站部署到 Zerops
description: 如何使用 Zerops 将你的 Astro 网站部署到网络。
sidebar:
  label: Zerops
type: deploy
logo: zerops
supports: ['ssr', 'static']
i18nReady: true
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
import { Steps } from '@astrojs/starlight/components';

[Zerops](https://zerops.io/) 是一个以开发优先的云平台，可用于部署静态和服务端渲染的 Astro 网站。

本指南将引导你在 Zerops 上设置和部署静态 和 SSR 服务端渲染的 Astro 站点。

:::tip[Astro x Zerops 速览]
想在不安装或设置任何东西的情况下测试在 Zerops 上运行 Astro 吗？使用 [Zerops x Astro - Static](https://github.com/zeropsio/recipe-astro-static) 或 [Zerops x Astro - SSR](https://github.com/zeropsio/recipe-astro-nodejs) 存储库，一键部署示例 Astro 站点。
:::

在 Zerops 上运行应用程序需要两个步骤：
1. 创建项目
2. 触发构建和部署流水线

:::note
一个 Zerops 项目可以包含多个 Astro 站点。
:::

## 在 Zerops 上部署 Astro 静态站点

### 创建 Astro 静态站点的项目和服务
可以通过 [`Project add`](https://app.zerops.io/dashboard/project-add) 向导或使用 yaml 结构导入项目和服务：

```yaml
# 参考 https://docs.zerops.io/references/import 了解更多
project:
  name: recipe-astro
services:
  - hostname: app
    type: static
```

这将创建一个名为 `recipe-astro` 的项目，其中包含一个名为 `app` 的 Zerops 静态服务。

### 部署你的 Astro 静态站点

要告诉 Zerops 如何构建和运行你的站点，请在存储库中添加 `zerops.yml` 文件：

  <PackageManagerTabs>
    <Fragment slot="npm">
    ```yaml title="zerops.yml"
    # 参考 https://docs.zerops.io/zerops-yml/specification 了解更多
    zerops:
      - setup: app
        build:
          base: nodejs@20
          buildCommands:
            - npm i
            - npm build
          deployFiles:
            - dist/~
        run:
          base: static
    ```
    </Fragment>
    <Fragment slot="pnpm">
    ```yaml title="zerops.yml"
    # 参考 https://docs.zerops.io/zerops-yml/specification 了解更多
    zerops:
      - setup: app
        build:
          base: nodejs@20
          buildCommands:
            - pnpm i
            - pnpm build
          deployFiles:
            - dist/~
        run:
          base: static
    ```
    </Fragment>
    <Fragment slot="yarn">
    ```yaml title="zerops.yml"
    # 参考 https://docs.zerops.io/zerops-yml/specification 了解更多
    zerops:
      - setup: app
        build:
          base: nodejs@20
          buildCommands:
            - yarn
            - yarn build
          deployFiles:
            - dist/~
        run:
          base: static
    ```
    </Fragment>
  </PackageManagerTabs>

现在你可以 [使用 Zerops CLI 触发构建和部署流水线](#使用-zerops-cli-触发流水线zcli)，或者通过服务详情内部将 `app` 服务与你的 [GitHub](https://docs.zerops.io/references/github-integration/) / [GitLab](https://docs.zerops.io/references/gitlab-integration) 存储库连接。

## 在 Zerops 上部署 Astro SSR 站点

### 更新脚本

更新你的 `start` 脚本以运行 Node 适配器的服务器输出。

```json title="package.json"
"scripts": {
  "start": "node ./dist/server/entry.mjs",
} 
```

### 创建 Astro SSR（Node.js）的项目和服务
可以通过 [`Project add`](https://app.zerops.io/dashboard/project-add) 向导或使用 yaml 结构导入项目和服务：

```yaml
# 参考 https://docs.zerops.io/references/import 了解更多
project:
  name: recipe-astro
services:
  - hostname: app
    type: nodejs@20
```

这将创建一个名为 `recipe-astro` 的项目，其中包含一个名为 `app` 的 Zerops Node.js 服务。

### 部署你的 Astro SSR 站点

要告诉 Zerops 如何使用官方的 [Astro Node.js 适配器](/zh-cn/guides/integrations-guide/node/) 在 `standalone` 模式下构建和运行你的站点，请在存储库中添加 `zerops.yml` 文件：

  <PackageManagerTabs>
    <Fragment slot="npm">
    ```yaml title="zerops.yml"
    # 参考 https://docs.zerops.io/zerops-yml/specification 了解更多
    zerops:
      - setup: app
        build:
          base: nodejs@20
          buildCommands:
            - npm i
            - npm run build
          deployFiles:
            - dist
            - package.json
            - node_modules
        run:
          base: nodejs@20
          ports:
            - port: 3000
              httpSupport: true
          envVariables:
            PORT: 3000
            HOST: 0.0.0.0
          start: npm start
    ```
    </Fragment>
    <Fragment slot="pnpm">
    ```yaml title="zerops.yml"
    # 参考 https://docs.zerops.io/zerops-yml/specification 了解更多
    zerops:
      - setup: app
        build:
          base: nodejs@20
          buildCommands:
            - pnpm i
            - pnpm run build
          deployFiles:
            - dist
            - package.json
            - node_modules
        run:
          base: nodejs@20
          ports:
            - port: 3000
              httpSupport: true
          envVariables:
            PORT: 3000
            HOST: 0.0.0.0
          start: pnpm start
    ```
    </Fragment>
    <Fragment slot="yarn">
    ```yaml title="zerops.yml"
    # 参考 https://docs.zerops.io/zerops-yml/specification 了解更多
    zerops:
      - setup: app
        build:
          base: nodejs@20
          buildCommands:
            - yarn
            - yarn build
          deployFiles:
            - dist
            - package.json
            - node_modules
        run:
          base: nodejs@20
          ports:
            - port: 3000
              httpSupport: true
          envVariables:
            PORT: 3000
            HOST: 0.0.0.0
          start: yarn start
    ```
    </Fragment>
  </PackageManagerTabs>

现在你可以 [使用 Zerops CLI 触发构建和部署流水线](#使用-zerops-cli-触发流水线zcli)，或者通过服务详情内部将 `app` 服务与你的 [GitHub](https://docs.zerops.io/references/github-integration/) / [GitLab](https://docs.zerops.io/references/gitlab-integration) 存储库连接。

## 使用 Zerops CLI 触发流水线（zcli）

<Steps>
1. 安装 Zerops CLI。
		```shell
		# 要直接下载 zcli 二进制文件，
		# 请使用 https://github.com/zeropsio/zcli/releases
		npm i -g @zerops/zcli
		```

2. 在 Zerops 中打开 [`Settings > Access Token Management`](https://app.zerops.io/settings/token-management) 并生成一个新的访问令牌。

3. 用以下命令使用访问令牌登录：
		```shell
		zcli login <token>
		```

4. 导航到应用的根目录（`zerops.yml` 所在的位置），并运行以下命令以触发部署：
		```shell
		zcli push
		```
</Steps>

## 资源
### 官方

- [创建 Zerops 账号](https://app.zerops.io/registration)
- [Zerops 文档](https://docs.zerops.io)
- [Zerops Astro 操作指南](https://app.zerops.io/recipe/astro)

### 社区
- [3 分钟部署 Astro 到 Zerops](https://medium.com/@arjunaditya/how-to-deploy-astro-to-zerops-4230816a62b4)
- [使用 Node.js 在 Zerops 上一键部署 Astro SSG 站点](https://youtu.be/-4KTa4VWtBE)
- [使用 Node.js 在 Zerops 上一键部署 Astro SSR 站点](https://youtu.be/eR6b_JnDH6g)
